import React, { Component } from 'react'

export default class Form extends Component {
  state = {
    username: '',
    password: '',
    isAgree: false,
    city: '',
    sex: '',
    hobby: [],
    file: {},
  }
  //   handle = (name) => {
  //     return (e) => {
  //       // console.log(e.target.value)
  //       // 判断: 如果type类型是checkbox,则获取checked. 如果type类型是file,则获取files,其他都是value
  //       let value
  //       if (e.target.type === 'checkbox') {
  //         value = e.target.checked
  //       } else if (e.target.type === 'file') {
  //         value = e.target.files[0]
  //       } else {
  //         value = e.target.value.trim()
  //       }
  //       this.setState({
  //         [name]: value,
  //       })
  //     }
  //   }
  // 简写:
  handle = (name) => (e) => {
    // 判断: 如果type类型是checkbox,则获取checked. 如果type类型是file,则获取files,其他都是value
    let value
    if (e.target.type === 'checkbox') {
      value = e.target.checked
    } else if (e.target.type === 'file') {
      value = e.target.files[0]
    } else {
      value = e.target.value.trim()
    }
    this.setState({
      [name]: value,
    })
  }

  hobbyHandle = (e) => {
    const value = e.target.value
    // 去hobby数组中判断是否有这个数据,有则删除,无则添加
    const index = this.state.hobby.indexOf(value)
    if (index != -1) {
      //删除
      this.state.hobby.splice(index, 1)
    } else {
      // 添加
      this.state.hobby.push(value)
    }
    this.setState({
      hobby: this.state.hobby,
    })
  }
  render() {
    return (
      <div>
        {/* onChange事件是在用户输入或修改表单时触发 */}
        用户名:
        {/* 受控组件: 一旦一个标签的值,被react的数据控制了,这个标签就叫做受控组件 */}
        <input
          type="text"
          value={this.state.username}
          onChange={this.handle('username')}
        />
        <br />
        密码:
        <input
          type="password"
          value={this.state.password}
          onChange={this.handle('password')}
        />
        <br />
        是否同意协议:
        <input
          type="checkbox"
          checked={this.state.isAgree}
          onChange={this.handle('isAgree')}
        />
        <br />
        选择城市:
        <select
          name=""
          id=""
          value={this.state.city}
          onChange={this.handle('city')}
        >
          <option value="sz">深圳</option>
          <option value="bj">北京</option>
          <option value="sh">上海</option>
        </select>
        <br />
        男:
        <input
          type="radio"
          value="male"
          name="sex"
          onChange={this.handle('sex')}
        />
        女:
        <input
          type="radio"
          value="female"
          name="sex"
          onChange={this.handle('sex')}
        />
        <br />
        爱好: <br />
        抽烟:
        <input type="checkbox" value="smoking" onChange={this.hobbyHandle} />
        喝酒:
        <input type="checkbox" value="drinking" onChange={this.hobbyHandle} />
        找富婆:
        <input type="checkbox" value="findMoney" onChange={this.hobbyHandle} />
        <br />
        文件: <input type="file" onChange={this.handle('file')} />
      </div>
    )
  }
}
